<div class="table-section">
  <h3>table less information：</h3>
  <lv-datatable [lvData]="data" #lvSimpleTable>
    <thead>
      <tr>
        <th width="40px" [class.lv-table-column-has-folder]="true"></th>
        <th lvCellKey="name">Name</th>
        <th lvCellKey="age">Age</th>
        <th lvCellKey="random">Random</th>
        <th lvCellKey="operation">Operation</th>
      </tr>
    </thead>
    <tbody>
      <ng-container *ngFor="let item of lvSimpleTable.renderData">
        <ng-container
          *ngTemplateOutlet="item?.isEditing ? editSimpleViewTpl : textSimpleViewTpl; context: { $implicit: item }"
        ></ng-container>
      </ng-container>
    </tbody>
  </lv-datatable>

  <h3>table more information：</h3>
  <lv-datatable [lvData]="data" #lvComplexTable>
    <thead>
      <tr>
        <th lvCellKey="name">Name</th>
        <th lvCellKey="age">Age</th>
        <th lvCellKey="random">Random</th>
        <th lvCellKey="operation">Operation</th>
      </tr>
    </thead>
    <tbody>
      <ng-container *ngFor="let item of lvComplexTable.renderData">
        <ng-container *ngTemplateOutlet="textComplexViewTpl; context: { $implicit: item }"></ng-container>
        <ng-container *ngIf="item?.isEditing">
          <ng-container *ngTemplateOutlet="editComplexViewTpl; context: { $implicit: item }"></ng-container>
        </ng-container>
      </ng-container>
    </tbody>

    <!-- 表格配置信息较少时展示template -->
    <ng-template #textSimpleViewTpl let-item>
      <tr>
        <td lvShowUnfold [(lvUnfold)]="item.expand"></td>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>{{ item.random }}</td>
        <td class="lv-table-operation-list">
          <lv-operation-menu [lvData]="item" [lvItemsFn]="itemCallback"></lv-operation-menu>
        </td>
      </tr>
      <tr *ngIf="item.expand" lvInnerUnfold>
        <td colspan="5" lvInnerUnfold>
          <div class="inner-content">
            <p>Id: {{ item.id }}</p>
            <p>Name: {{ item.name }}</p>
            <p>Age: {{ item.age }}</p>
          </div>
        </td>
      </tr>
    </ng-template>

    <!-- 表格配置信息较少时编辑template -->
    <ng-template #editSimpleViewTpl let-item>
      <tr>
        <td></td>
        <td>
          <input lv-input [(ngModel)]="cacheDataMap[item.id].name" />
        </td>
        <td>
          <input lv-input [(ngModel)]="cacheDataMap[item.id].age" />
        </td>
        <td>
          <input lv-input [(ngModel)]="cacheDataMap[item.id].random" />
        </td>
        <td class="lv-table-operation-list">
          <a (click)="saveRow(item)">Save</a>
          <a (click)="cancelRow(item)">Cancel</a>
        </td>
      </tr>
    </ng-template>

    <!-- /**************************/ -->

    <!-- 表格配置信息较多时展示template -->
    <ng-template #textComplexViewTpl let-item>
      <tr>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>{{ item.random }}</td>
        <td class="lv-table-operation-list">
          <ng-container *ngIf="!item?.isEditing">
            <lv-operation-menu [lvData]="item" [lvItemsFn]="itemCallback"></lv-operation-menu>
          </ng-container>
        </td>
      </tr>
    </ng-template>

    <!-- 表格配置信息较多时编辑template -->
    <ng-template #editComplexViewTpl let-item>
      <tr lvUnfoldEdit>
        <td colspan="4" lvUnfoldEdit>
          <lv-form [formGroup]="formGroupMap[item.id]" class="edit-form">
            <lv-form-item>
              <lv-form-label lvRequired>name</lv-form-label>
              <lv-form-control [lvErrorTip]="{ required: 'name format error', nameExist: 'name already exists' }">
                <input lv-input type="text" formControlName="name" />
              </lv-form-control>
            </lv-form-item>
            <lv-form-item>
              <lv-form-label lvRequired>password</lv-form-label>
              <lv-form-control lvErrorTip="wrong password format">
                <input lv-input type="password" formControlName="password" />
              </lv-form-control>
            </lv-form-item>
            <lv-form-item>
              <lv-form-label lvRequired>contact</lv-form-label>
              <lv-form-control lvErrorTip="no contact selected">
                <lv-select formControlName="contact" lvValueKey="label" [lvOptions]="contactOptions"></lv-select>
              </lv-form-control>
            </lv-form-item>
            <lv-form-item *ngIf="formGroupMap[item.id].contains('email')">
              <lv-form-label>
                email
                <i lv-icon="icon-help" style="margin-left: 4px; width: 14px"></i>
              </lv-form-label>
              <lv-form-control lvErrorTip="email format error">
                <input formControlName="email" />
              </lv-form-control>
            </lv-form-item>
            <lv-form-item *ngIf="formGroupMap[item.id].contains('phone')">
              <lv-form-label>phone</lv-form-label>
              <lv-form-control lvErrorTip="phone format error">
                <input formControlName="phone" />
              </lv-form-control>
            </lv-form-item>
            <lv-form-item>
              <lv-group lvGutter="16px">
                <button
                  lv-button
                  lvType="primary"
                  (click)="saveComplexRow(item)"
                  [disabled]="!formGroupMap[item.id].valid"
                  class="aui-gutter-row-md"
                >
                  Save
                </button>
                <button lv-button (click)="cancelRow(item)">Cancel</button>
              </lv-group>
            </lv-form-item>
          </lv-form>
        </td>
      </tr>
    </ng-template>
  </lv-datatable>
</div>

